import React, { Component ,Fragment, useEffect } from 'react';
import { Button ,Input, Layout , Message} from 'element-react';
import {useNavigate} from 'react-router-dom'
import 'element-theme-default';
import './index.css'
import { connect } from 'react-redux';
import {createLoginAction} from '../../redux/actions/loginAction'

var nagtive ;
function Lbanner() {
    return (
        <div className='Login-banner'>
            <h1> 
            Welcome To Device System <br/>
            This system aim is that help university to effectively manage different experimental device  
            </h1>
        </div> 
    )
}
function Ltitle() {
    return (
        <Fragment>
            <h2 style={{textAlign:'center'}}>Sign In</h2>
        </Fragment>
    )
}
function Forgetpwd(params) {
    return (
        <Layout.Col offset='4' span="8">
            <Button type="text" style={{textAlign:'inherit'}} >
                Forgot Password?
            </Button>
        </Layout.Col>
    )
}
function Register(params) {
    return (
        <Layout.Col offset='3' span="8">
            <Button type="text" style={{textAlign:''}} >
                sign Up
            </Button>
        </Layout.Col>
    )
}

function SignInUI(params) {
    const {id , pwd} = params
    const [loginstate , setLoginstate] = React.useState(false)
    nagtive = useNavigate()

    function userlogin() {
        try {
            setLoginstate(true)
            fetch(`/device/userlogin?userid=${id}&userpwd=${pwd}` , {
                method: 'GET',
            }).then(data => data.json())
            .then(async(result) =>{
               if(result.msg==='success') {
                // `/main/${id}/${pwd}`
                params.useLogin({username:id, token:"" , login_state:true , role : result.info.role})
                nagtive('/main', {state:{id , pwd , islogin:true}})
               } else {
                    setLoginstate(false)
                   Message.warning("账号或者密码错误")
               }
            })
        } catch(error) {
            setLoginstate(false)
            Message.error(error)
        }
    }
   
    return (
        <Layout.Col offset='4' span="16">
            <Button disabled={loginstate} icon={loginstate?"loading":""} type="primary" onClick={userlogin}>
                {
                    loginstate?"Loading": "Sign In"
                }  
            </Button>
        </Layout.Col>
    )
}

const SignIn = connect(
    state => ({userInfo:state.login}) , 
    {
        useLogin:createLoginAction
    }
)(SignInUI)

class Loginbox extends Component {

    state = {
        id:"",
        pwd:""
    }
    userInfo = ()=>{
        return {
            id: this.state.id ,
            pwd: this.state.pwd
        }
    }

    render() {
        return (
            <Fragment>

                <Layout.Row>
                    <Layout.Col offset='4' span="16">
                        <Input onBlur={(e)=>{this.setState({id:e.target.value}) }} placeholder="账号" />
                    </Layout.Col>
                </Layout.Row> 

                <Layout.Row style={{margin:0}}>
                    <Layout.Col offset='4' span="16">
                        <Input onBlur={(e)=>{this.setState({pwd:e.target.value})} } type='password' placeholder="密码" />
                    </Layout.Col>
                </Layout.Row> 

                <Layout.Row style={{margin:0}}>
                    <Forgetpwd/>
                    <Register/>
                </Layout.Row> 

                <Layout.Row>
                    <SignIn {...this.state}/>
                </Layout.Row>

            </Fragment>
        )
    }
}

export default class DeviceLogin extends Component {
  render() {
    return (
        <div className='Background-canves'>
            <div className='Login-box'>
                <Ltitle/>
                <Loginbox/>
            </div>
            <Lbanner/>
        </div>
    )
  }
}
